
<template>
        <!-- 
            确定动态的 属性
                1. id => echarts 的容器
                2. 自己定义一个动态的属性， bar = 2
                3. tooltip 布尔值
         -->     

         <div class="bar" :id="echartsid" :style="{ width: 600 + 'px', height: 400 + 'px' }">
         </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, watch, ref } from 'vue'
//  echarts 图表，本质是生成dom

// 接收一个父组件传递的数据
let props: any = defineProps({
    echartsList: {   // 这个是异步数据
        type: Object,
    },
    echartsid: {  // 这个是默认数据， 是可以直接使用的（同步）
        type: String,
        default: 'bar'
    },
    echartsBar: {  //默认的数据
        type: Number || String,
        default: 1
    },
    tooltip:{
        type:Boolean,
        default: false        
    }
})


watch(() => props, (newVal: any) => {
    // console.log(newVal, 22222);
    // 创建（绘画）图表   =》 需要用一个方法
    getEchartT(newVal.echartsList)
}, {
    deep: true
})

let echartsDom: any = ref('')
// 配置图表信息
const getEchartT = (obj: any) => {
    // console.log(obj,55566);
    let option = {  // echarts属性
        xAxis: {
            type: 'category',
            // data: props.echartsList.xdata
            data: obj.xdata
        },
        yAxis: {
            type: 'value',
            splitLine: {   //背景设置成虚线
                show: true,
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        tooltip: {
            trigger: props.tooltip?'item':'',
            axisPointer: {
                type: 'line',  // shadow  line  cross
                label: {
                    // backgroundColor: 'pink',
                    show: true,
                }
            },
            showContent:true
        },
        series: [
            {
                data: obj.list,
                type: 'bar',
                showBackground: true,
            },
            props.echartsBar == 2 ? getBar2(obj.list1) : ''    // 如果=2，就添加一组数据
        ]
    };
    echartsDom.value.setOption(option);  // 然后这里就是添加数据
}

onMounted(() => {  //组件的生命周期 =》 组件创建 执行一次
    echartsDom.value = echarts.init(document.getElementById(props.echartsid));  //组件一创建，此dom结构也创建了
})

const getBar2 = (list: any) => {  //  规定形参的类型
    return {
        name: 2012,
        type: 'bar',
        // data: [120, 200, 150, 80, 170, 110, 130,100],
        data: list

    }
}

// 总结  项目中的echarts 二次封装 （只要有可视化图表就需要）
/**
 *  1. 创建一个单独的文件 =》 初始化 一项echarts实例对象
 *  2。 因为我们工作中，可视化图表都是动态的数据，我又进行封装，通过watch 获取到异步数据
 *      再触发 echarts 配置图表的方法 （为什么这样： 组件的渲染和组件的数据 前者更快）
 * 
 *   1）因为我写项目都是组件化开发，方便后期的复用和维护
 *      组件渲染关系：渲染父子组件
 *      数据： 如果这个子组件的数据是异步，我需要在逻辑层 获取到这个数据，使用watch方法
 *          watch实时更新echarts图表的配置信息
 *  3. 怎么处理样式 =》 ui给的可视化图表
 *      1. 先到echarts 案例中找
 *      2. 百度 
 * 
 * **/


</script>

<style></style>